/*
 * @Description:
 * @Author: ldx
 * @Date: 2022-04-07 10:12:48
 * @LastEditors: ldx
 * @LastEditTime: 2022-05-06 21:13:59
 */
import { Breadcrumb } from 'antd'
import React, { Fragment, useEffect, useRef, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'

import Footer from '@/layout/footer'
import { routes, RoutesType } from '@/router/routes'

import styles from './index.module.less'

const findRoute = (url: string, routes: RoutesType[]): string | undefined => {
  for (let i = 0; i < routes.length; i++) {
    const route = routes[i]
    const { path, routes: childRoutes } = route
    if (path === url) {
      return route.redirect || ''
    }
    if (childRoutes && childRoutes.length > 0) {
      return findRoute(url, childRoutes)
    }
  }
}
const breadcrumbNameMap: { [key: string]: string } = {
  '/projectManage': '项目管理',
  '/systemSettings': '系统设置',
  '/systemSettings/predictManage': '预测管理',
  '/systemSettings/reportManage': '报告管理'
}
export const PageContainer = (props: {
  children?: React.ReactNode
  content?: (() => React.ReactNode) | string
  subText?: (() => React.ReactNode) | string
  footer?: (() => React.ReactNode) | null
  className?: string
}) => {
  const breadcrumbRef = useRef<HTMLDivElement>(null)
  const [height, setHeight] = useState<number>(0)
  const location = useLocation()
  // let extraBreadcrumbCurrent = ''
  const pathSnippets = location.pathname.split('/').filter((i) => i)

  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`
    // extraBreadcrumbCurrent = breadcrumbNameMap[url]
    // console.log('breadcrumbNameMap[url]', url, breadcrumbNameMap[url])
    const redirect = findRoute(url, routes)
    return breadcrumbNameMap[url] ? (
      redirect ? (
        <Breadcrumb.Item key={url}>
          <Link to={redirect}>{breadcrumbNameMap[url]}</Link>
        </Breadcrumb.Item>
      ) : (
        <Breadcrumb.Item key={url}>
          <Link to={url}>{breadcrumbNameMap[url]}</Link>
        </Breadcrumb.Item>
      )
    ) : (
      <Fragment key={url} />
    )
  })
  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">首页</Link>
    </Breadcrumb.Item>
  ].concat(extraBreadcrumbItems)
  useEffect(() => {
    console.log(
      'breadcrumbRef.current?.clientHeight',
      breadcrumbRef.current?.clientHeight
    )
    const height = breadcrumbRef.current?.clientHeight || 0
    setHeight(height)
  }, [breadcrumbRef.current])
  return (
    <div className={styles.pageContainer}>
      <div className={styles.containerWarp} ref={breadcrumbRef}>
        <Breadcrumb>{breadcrumbItems}</Breadcrumb>
        {props.subText && (
          <span className={styles.subText}>{props.subText}</span>
        )}
        {props.content && (
          <span className={styles.contentText}>
            {typeof props.content === 'string'
              ? props.content
              : props.content()}
          </span>
        )}
      </div>
      <div
        className={`${styles.content} bg-#f1f2f6 ${props.className}`}
        style={{
          height:
            props.footer === null
              ? `calc(100% - ${height || 98}px)`
              : `calc(100% - ${(height || 98) + 60}px)`
        }}
      >
        {props.children}
      </div>
      {props.footer === null ? (
        <></>
      ) : props.footer ? (
        props.footer()
      ) : (
        <Footer />
      )}
    </div>
  )
}
